/*1、flex-direction
  用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置
  取值：row | row-reverse | column | column-reverse
    row：默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴
    row-reverse：与row相反
    column：表示垂直方向从上到下排列，此时垂直方向轴线为主轴
    column-reverse：与column相反
*/

/*.box {
  margin-left: 30%;
  margin-top: 10%;
  width: 50%;
  height: 50%;
  background-color: #58a;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  !*display: flex; 将对象作为弹性伸缩盒展示，用于块级元素
    display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素*!
}*/
/*
  flex-wrap
  用于指定Flex子项是否换行
  取值：nowrap | wrap | wrap-reverse
  nowrap：默认值，表示不换行，Flex子项可能会溢出
  wrap：表示换行，溢出的Flex子项会被放到下一行
  wrap-reverse：表示反方向换行
*/
/*justify-content
  用于指定主轴(水平方向)上Flex子项的对齐方式
  取值：flex-start | flex-end | center | space-between | space-around
  flex-start：默认值，表示与行的起始位置对齐
  flex-end：表示与行的结束位置对齐
  center：表示与行中间对其
  space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start
  space-around：表示间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center
*/

/*
  align-items
  用于指定侧轴(垂直方向)上Flex子项的对齐方式
  取值：stretch | flex-start | flex-end | center | baseline
  stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即Flex子项高度为容器的高度
  flex-start：表示与侧轴开始位置对齐
  flex-end：表示与侧轴的结束位置对齐
  center：表示与侧轴中间对其
  baseline：表示基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start
*/
/*
  align-content
  该属性只作用于多行的情况下，用于多行的对齐方式
  取值：stretch | flex-start | flex-end | center | space-between | space-around
  stretch：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。
  flex-start：表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行
  flex-end：表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行
  center：表示各行与侧轴中间对其
  space-between：表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数时，效果等同于flex-start
  space-around：表示各行之间间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数时，效果等同于center
  再次强调：该属性只作用于多行的情况，在只有一行的Flex容器上无效，另外该属性可以很好的处理，换行以后相邻行之间产生的间距。
*/
/*.item {
  !*width: 100px;
  height: 100px;*!
  flex-basis: 40%;
  margin: 10px;
  background-color: #fb3;
  flex-direction: row;
}*/
.box{
  width:800px;
  height: 600px;
  text-align: center;
  line-height: 60px;
}
.container{
  width: 805px;
  margin:0 auto;
}
.header{
  width:100%;
  height:60px;
  background: orange;
}
.content{
  position: relative;
  width:700px;
  margin:0 auto;
}
.content_body{
  position: relative;
  width:100%;
  height:480px;
  background: olive;
}
.content_footer{
  position: relative;
  height:60px;
  background: orangered;
  width:100%
}
.left{
  height:100%;
  width:100px;
  float: left;
  background: orchid;
}
.right{
  height:100%;
  width:100px;
  float: right;
  background:yellowgreen;
}
